<!DOCTYPE html>
<html>
<head>
	<title>TweenJS: CSS Performance Test</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/tweenjs.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js" type="text/javascript"></script>

	<script type="text/javascript" src="../lib/tweenjs-NEXT.js"></script>
	<script type="text/javascript" src="../_assets/libs/easeljs-NEXT.min.js"></script>
	<script type="text/javascript" src="../src/tweenjs/plugins/CSSPlugin.js"></script>
	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

<style>
	.dot {
		position:absolute; 
		width: 1px;
		height: 1px;
	}
	#fps {
		background-color: #eaebee;
		padding: 5px;
		font-weight:bold;
	}
	
</style>

<script id="editable">
	var c=createjs, stage, centerX, centerY, radius, fpsFld;
	var duration=750, count=1000, displayTime=3000;

	function init() {
		createjs.CSSPlugin.install();
		createjs.CSSPlugin.compute = true;
		
		fpsFld = document.getElementById("fps");
		stage = document.body;
		stage.style.overflow = "hidden";
		
		centerX = window.innerWidth/2;
		centerY = window.innerHeight/2;
		
		radius = Math.sqrt(centerX*centerX + centerY*centerY);
		
		var t = performance.now();
		var i = 0;
		while (i++ < count) {
			var dot = getDot();
			stage.appendChild(dot);
			tween(dot);
		}
		console.log("time to create tweens:",performance.now()-t,"ms");
		
		c.Ticker.timingMode = c.Ticker.RAF;
		c.Ticker.on("tick",tick);
	}
	
	function getDot() {
		var dot = document.createElement("img");
		dot.className = "dot";
		dot.src = "../_assets/art/dot.png";
		return dot;
	}
	
	function tween(dot) {
		cssText = "left:" + centerX + "px; top:" + centerY + "px;";
		if (!createjs.CSSPlugin.compute) {
			// if we're not using computed values, all initial values need to be inline:
			cssText += " width: 1px; height: 1px";
		}
		dot.style.cssText = cssText;
		
		var angle = Math.random() * Math.PI * 2;
		c.Tween.get(dot, {loop:-1}).wait( Math.random() * duration ).to({
				left:Math.cos(angle) * radius + centerX,
				top:Math.sin(angle) * radius + centerY,
				width:32, height:32
			}, duration, c.Ease.cubicIn);
		
		return dot;
	}
	
	function tick(evt) {
		fpsFld.innerHTML = count+" @ "+c.Ticker.getMeasuredFPS(120).toFixed(1)+"fps";
	}
	
	
</script>
</head>

<body onload="init();" style="background-color:#111111">

<header class="TweenJS">
	<h1>CSS Performance Test</h1>
	
</header>
<p id="fps">-- fps</p>
</body>
</html>
